<!--
 * @Author: quit
 * @Date: 2021-11-23 10:25:29
 * @LastEditTime: 2022-01-14 16:48:18
 * @Descripttion: 用户页面
-->
<template>
    <div id="-container">
        <div class="app-container">
            <el-card>
                <!-- 搜索区域 -->
                <el-row class="row1">
                    <el-divider content-position="left">{{ $t('divider.divider1') }}</el-divider>
                    <div class="search">
                        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                            <el-form-item :label="'页面名'">
                                <el-input v-model="searchForm.appname" :placeholder="'请输入查询页面名'" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-zoom-in" @click="getUserPicPageList">{{ $t('button.search') }}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-row>
                <!-- 按钮组 -->
                <el-row>
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addItems">{{ '添加页面' }}</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="batchRemove">{{ $t('button.batchRemove') }}</el-button>
                </el-row>
                <!-- 表格 -->
                <el-row>
                    <el-table
                        ref="tabel"
                        v-loading="loading"
                        :data="tableData"
                        :empty-text="$t('table.emptyText')"
                        style="width: 100%"
                        :max-height="maxHeight"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" min-width="40" fixed="left" />
                        <el-table-column prop="picid" label="ID" min-width="50" fixed="left" />
                        <el-table-column prop="appid" :label="'项目ID'" min-width="50" fixed="left" />
                        <el-table-column prop="picname" :label="'页面名'" min-width="200" fixed="left" />
                        <el-table-column prop="pictype" :label="'页面类型'" min-width="80" />
                        <el-table-column prop="picisshow" :label="'页面是否显示'" min-width="80" />
                        <el-table-column prop="picparent" :label="'父级页面'" min-width="80" />
                        <el-table-column prop="piclevel" :label="'页面顺序'" min-width="80" />
                        <el-table-column header-align="center" align="center" fixed="right" :label="$t('table.operable')" min-width="290">
                            <template slot-scope="scope">
                                <el-button type="success" size="mini" @click="editHandle(scope.row)">{{ $t('button.edit') }}</el-button>
                                <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">{{ $t('button.delete') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination
                        :current-page="pages.page"
                        :page-sizes="[1, 5, 10]"
                        :page-size="pages.size"
                        layout="prev, pager, next, total, sizes, jumper"
                        :total="pages.total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </el-row>
            </el-card>
        </div>
        <!-- 添加弹出层 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogAddVisible" width="30%" @close="dialogAddVisibleClose">
            <el-form ref="dialogFrom" :model="dialogFrom" label-width="80px" class="dialog-from">
                <el-form-item label="页面名称">
                    <el-input v-model="dialogFrom.picname" placeholder="请输入图片名称" />
                </el-form-item>
                <el-form-item label="页面类型">
                    <el-select v-model="dialogFrom.pictype" placeholder="请选择项目类型" clearable>
                        <el-option v-for="(item, index) in pageTypeData" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-select v-model="dialogFrom.picisshow" placeholder="请选择项目类型" clearable>
                        <el-option v-for="(item, index) in isShowData" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取 消</el-button>
                <el-button v-if="dialogAddVisibleState === 0" type="primary" @click="sendAdditem">确 定</el-button>
                <el-button v-if="dialogAddVisibleState === 1" type="primary" @click="sendEditItem">提 交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import $ from 'jquery'
import { getData } from '@/utils/auth'
import { getUserPicPageList, addUserPage, deleteUserPage, editUserPage, deleteUserPages } from '@/api/BotRequest'

export default {
    components: {},
    data() {
        return {
            botData: {},
            searchForm: { appname: '' },
            loading: false,
            maxHeight: null,
            tableData: [],
            pages: {
                page: 1,
                size: 10,
                total: 0
            },
            checkedItmes: [],
            dialogAddVisible: false,
            dialogTitle: '',
            dialogAddVisibleState: null,
            dialogFrom: { picname: null, pictype: null, picisshow: null },
            pageTypeData: [
                { value: 0, label: '常规页面' },
                { value: 1, label: 'GIS页面' }
            ],
            isShowData: [
                { value: 0, label: '显示页' },
                { value: 1, label: '隐含页' }
            ]
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    created() {
        this.botData = getData('BotData')
        this.getUserPicPageList()
    }, // 生命周期 - 创建完成（可以访问当前this实例）
    mounted() {
        this.setTableHeight()
        window.onresize = () => {
            this.setTableHeight()
        }
    }, // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
    // 方法集合
    methods: {
        // 动态设置表格高
        setTableHeight() {
            var num = $(window).height() - 295
            this.maxHeight = num
        },

        // 获取基本数据
        async getUserPicPageList() {
            this.loading = true
            const obj = {
                picmanager: {
                    appid: this.botData.id,
                    picname: this.searchForm.appname
                },
                pages: {
                    page: this.pages.page,
                    size: this.pages.size
                }
            }
            try {
                const {
                    data: { records, current, size, total }
                } = await getUserPicPageList(obj)
                this.tableData = records
                this.pages.page = current
                this.pages.size = size
                this.pages.total = total
            } catch (error) {
                console.log(error)
            } finally {
                this.loading = false
            }
        },

        // 表格多选事件
        handleSelectionChange(val) {
            const arr = []
            val.forEach((item, i) => {
                arr.push(item.picid)
            })
            this.checkedItmes = arr
        },

        // 添加项目按钮
        addItems() {
            this.dialogTitle = '添加用户页面'
            this.dialogAddVisibleState = 0
            this.dialogAddVisible = true
        },
        // 批量删除项目
        batchRemove() {
            if (this.checkedItmes.length > 0) {
                this.$confirm('此操作将永久删除当前所选数据, 是否继续?', '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async() => {
                        if (this.checkedItmes.length === this.tableData.length) {
                            if (this.pages.page > 1) {
                                this.pages.page--
                            } else {
                                this.pages.page = 1
                            }
                        }
                        const { message } = await deleteUserPages(this.checkedItmes)
                        await this.getUserPicPageList()
                        this.$message.success({ message })
                    })
                    .catch(error => {
                        console.log(error)
                        this.$refs.tabel.clearSelection()
                    })
            } else {
                this.$message.warning('请选择需要删除的项目')
            }
        },

        /* 添加弹出框事件 */
        // 关闭事件
        dialogAddVisibleClose() {
            this.dialogFrom = { picname: null, pictype: null, picisshow: null }
        },
        // 确定
        async sendAdditem() {
            const obj = {
                appid: this.botData.id,
                picparent: 0,
                piclevel: 0
            }
            try {
                const { message } = await addUserPage({ ...this.dialogFrom, ...obj })
                this.$message.success(message)
            } catch (error) {
                console.log(error)
            } finally {
                this.dialogAddVisible = false
                if (this.tableData.length === this.pages.size) {
                    this.pages.page++
                }
                await this.getUserPicPageList()
            }
        },
        // 编辑提交
        async sendEditItem() {
            try {
                const { message } = await editUserPage({ ...this.dialogFrom })
                this.$message.success(message)
            } catch (error) {
                console.log(error)
            } finally {
                this.dialogAddVisible = false
                await this.getUserPicPageList()
            }
        },

        /* table-itme项操作 */
        // 修改
        editHandle(data) {
            this.dialogFrom = { ...data }
            this.dialogTitle = '编辑用户页面'
            this.dialogAddVisibleState = 1
            this.dialogAddVisible = true
        },
        // 删除
        async deleteHandle(data) {
            this.$confirm('此操作将永久删除当前数据, 是否继续?', '确认操作', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async() => {
                    const { message } = await deleteUserPage(data.picid)
                    if (this.tableData.length === 1) {
                        if (this.pages.page > 1) {
                            this.pages.page--
                        } else {
                            this.pages.page = 1
                        }
                    }
                    await this.getUserPicPageList()
                    this.$message.success({ message })
                })
                .catch(async error => {
                    console.log(error)
                    await this.getUserPicPageList()
                })
        },

        // 分页显示条数切换
        async handleSizeChange(newSize) {
            this.pages.size = newSize
            await this.getUserPicPageList()
        },
        // 分页当前页切换
        async handleCurrentChange(newPage) {
            this.pages.page = newPage
            await this.getUserPicPageList()
        }
    }
}
</script>

<style scoped>
.el-table {
    margin-top: 10px;
}
.el-pagination {
    margin-top: 10px;
}
.el-form {
    margin-left: 0;
}
</style>

<style lang="scss" scoped>
.row1 {
    margin-bottom: 10px;
    .search {
        border: 1px solid #dcdfe6;
        border-top: none;
        padding: 34px 10px 10px 10px;
        margin-top: -14px;
        .el-input {
            width: 300px;
        }
    }
}
.dialog-from {
    .el-input {
        width: calc(100% - 30px);
    }
    .el-select {
        width: 50%;
    }
}
</style>
